<template>
  <view>
    <u-navbar
      height="50"
      back-icon-color="#333"
      title="商品详情"
      title-color="#333"
      title-size="36"
    >
    </u-navbar>
    <u-swiper
      :list="goodsInfo.carousel_imgs"
      @click="onPreview"
      height="750"
      border-radius="0"
      mode="number"
      indicator-pos="bottomRight"
    ></u-swiper>
    <view class="goodsView" sty>
      <view class="goods-price"> ¥{{ (goodsInfo.price * 0.01).toFixed(2) }} </view>
      <view class="sal-sto-box">
        <view class="goods-sal-sto-box">
          <view class="goods-sal-sto">
            <!-- <text style="margin-right: 10rpx;">销量 {{goodsInfo.sales_count}}</text> -->
            <!-- <text>库存 {{goodsInfo.stock}}</text> -->
          </view>
          <view class="">
            <text style="font-size: 30rpx; color: #000"
              >品牌：{{ goodsInfo.desc || '其他品牌' }}</text
            >
          </view>
        </view>
        <image
          v-if="isFavorte"
          @click="unFavorite"
          class="sc-icon"
          src="/static/img/scsp_xz.png"
          mode=""
        ></image>
        <image v-else @click="onFavorite" class="sc-icon" src="/static/img/2.png" mode=""></image>

        <!-- <text>收藏</text> -->
      </view>
      <view class="" style="display: flex; align-items: center">
        <view style="flex: 1; font-size: 36rpx">{{ goodsInfo.title }}</view>
        <view @click="onCoupon" style="display: flex; align-items: center">
          <text>更多优惠券</text><u-icon name="/static/img/more.png" size="16"></u-icon>
        </view>
      </view>
    </view>

    <view
      @click="goShop()"
      style="
        padding: 20rpx;
        background-color: #fff;
        margin: 20rpx 0;
        display: flex;
        align-items: center;
      "
    >
      <text v-if="shop.name.length > 15" style="flex: 1; font-size: 30rpx">
        {{ shop.name.substr(0, 15) + '...' }}</text
      >
      <text v-else style="flex: 1; font-size: 30rpx">{{ shop.name }}</text>
      <text style="color: red; margin-right: 8rpx">进入店铺</text>
      <u-icon name="/static/img/more.png" size="20"></u-icon>
    </view>

    <view
      @click="onShowSku(3)"
      style="
        padding: 20rpx;
        background-color: #fff;
        margin: 20rpx 0;
        display: flex;
        align-items: center;
      "
    >
      <text style="flex: 1; font-size: 30rpx">规格</text>
      <u-icon name="/static/img/more.png" size="20"></u-icon>
    </view>

    <view class="comment-box" @click="routeTo">
      <view class="comment-top">
        <text class="txt1">用户评论</text>
        <text class="txt2">{{ commentCount }}条好评></text>
      </view>

      <!-- <view class="comment-info">
					<view class="comment-info-left">
						<u-avatar class="info-left-tx" :src="comment.userAvatar" mode=""></u-avatar>
						<view class="info-left-username">
							<p>{{comment.userNickname}}</p>
							<p>{{comment.createTime}}</p>
						</view>
					</view>
					<view class="comment-info-right">
						<p style="text-align: right;">非常满意</p>
						<view class="">
							<u-rate v-model="comment.scores"></u-rate>
						</view>
					</view>					
				</view>
				<view class="comment-content">
					<view class="">
						{{comment.content}}
					</view>
					<view class="comment-img">
						<image v-for="(item, index) in comment.picUrls" :keuy="index":src="item" mode=""></image>
		
					</view>
				</view> -->
    </view>
    <view class="pickupView">
      <view class="sectionTitle">商品信息</view>
      <u-parse :html="goodsInfo.details" :tag-style="tagStyle"></u-parse>
    </view>

    <u-gap height="100"></u-gap>
    <submitBar @message="opMessage" @add="onShowSku(2)" @pay="onShowSku(3)"></submitBar>
    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuPopup"
      border-radius="20"
      :localdata="skuInfo"
      :mode="skuMode"
      goodsThumbName="cover_url"
      buy-now-background-color="#FF4242"
      goodsThumbBackgroundColor="#f5f5f5"
      add-cart-background-color="#22B857"
      @cart="onAddCart"
      @buy="onGoodsBuy"
    >
    </vk-data-goods-sku-popup>

    <u-popup v-model="showCoupon" height="700" mode="bottom">
      <view class="popup-box">
        <view class="couponListView">
          <view class="couponView" v-for="item in copuonList" :key="item.id">
            <view class="moneyView" v-if="item.discountType == 1">
              <view class="couponMoney"
                >¥<text>{{ (item.discountPrice * 0.01).toFixed(2) }}</text></view
              >
              <view class="couponTips">满减券</view>
            </view>
            <view class="moneyView" v-if="item.discountType == 2">
              <view class="couponMoney"
                >¥<text>{{ (item.discountPercent * 0.1).toFixed(2) }}</text></view
              >
              <view class="couponTips">折扣券</view>
            </view>
            <view class="lineView">
              <view class="circle"></view>
              <view class="line"></view>
              <view class="circle2"></view>
            </view>
            <view class="couponInfoView">
              <view class="couponTitle">{{ item.name }}</view>
              <view class="InfoView">
                <view class="couponTime" v-if="item.validityType == 1"
                  >有效日期{{ formatTime(item.validEndTime) }}</view
                >
                <view class="couponTime" v-else>自领取后{{ item.fixedEndTerm }}天有效</view>
                <view v-if="item.canTake" class="couponBtn" @click="onCouponGain(item)">领取</view>
                <view v-else="item.canTake" class="couponBtn" style="background-color: #e8e8e8"
                  >已领取</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import submitBar from '@/components/submit-bar.vue'
export default {
  components: {
    submitBar
  },
  data() {
    return {
      tagStyle: {
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      showCoupon: false,
      // 是否打开SKU弹窗
      skuPopup: false,
      // SKU弹窗模式
      skuMode: 3,
      // 后端返回的商品信息
      skuInfo: {},
      goodsId: '',
      categoryIds: [],
      goodsInfo: '',
      bannerList: [],
      commentCount: 0,
      isFavorte: false,
      copuonList: [],
      comment: {
        userNickname: '',
        userAvatar: '',
        createTime: '',
        scores: 0,
        content: '',
        picUrls: []
      },
      shop: {
        name: 'xjjjjjj'
      },
      isShowHope: false,
      msgContent: ''
    }
  },
  onLoad(res) {
    let now = new Date().getTime()
    if (uni.getStorageSync('showHope')) {
      this.isShowHope = true
    }
    this.goodsId = res.goodsId ? res.goodsId : ''
    if (res.shop) this.shop = res.shop ? JSON.parse(res.shop) : ''
    this.initData()
  },
  computed: {
    formatTime: function () {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    initData() {
      this.$u.api.getGoodsDetails({ id: this.goodsId }).then((res) => {
        this.goodsInfo = res.data.product
        if (res.data.product.carousel_imgs.length == 0) {
          res.data.product.carousel_imgs.push(res.data.product.cover)
        }
        res.data.sku_list.forEach((item) => {
          item.price = (item.price * 0.01).toFixed(2)
        })
        this.categoryIds = [res.data.product.product_category_id]
        this.skuInfo = res.data
      })

      this.$u.api
        .getGoodsComment({
          pageNo: 1,
          pageSize: 1,
          spuId: this.goodsId,
          type: 1
        })
        .then((res) => {
          if (res.data.list.length > 0) {
            this.comment = res.data.list[0]
            this.commentCount = res.data.total
          }
        })

      this.$u.get('/app-api/product/favorite/exits', { spuId: this.goodsId }).then((res) => {
        this.isFavorte = res.data
      })
    },
    onShowSku(index) {
      this.skuMode = index
      this.skuPopup = true
    },
    onCoupon() {
      this.showCoupon = true
      this.initCouponList()
    },

    initCouponList() {
      let skuIds = this.skuInfo.sku_list.map((item) => {
        return item._id
      })
      this.$u
        .get('/app-api/promotion/coupon-template/page', {
          price: this.goodsInfo.price,
          spuIds: this.goodsInfo.id,
          skuIds: skuIds.join(),
          categoryIds: this.goodsInfo.product_category_id
        })
        .then((res) => {
          this.copuonList = res.data.list
        })
    },
    opMessage() {
      uni.navigateTo({
        url: '/other/customer-chat/customer-chat?supId=' + this.goodsId
      })
    },

    onAddCart(item) {
      let self = this
      self.$u.api
        .setCartAdd({
          skuId: item._id,
          count: item.buy_num
        })
        .then((res) => {
          self.$u.toast('添加成功')
          this.skuPopup = false
        })
    },
    onFavorite() {
      this.$u.post('/app-api/product/favorite/create', { spuId: this.goodsId }).then((res) => {
        this.$u.toast('收藏成功')
        this.isFavorte = true
      })
    },
    unFavorite() {
      this.$u.delete('/app-api/product/favorite/delete', { spuId: this.goodsId }).then((res) => {
        this.$u.toast('取消成功')
        this.isFavorte = false
      })
    },
    onGoodsBuy(item) {
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          goods: JSON.stringify([item]),
          catIds: JSON.stringify(this.categoryIds)
        }
      })
    },

    onCouponGain(e) {
      this.$u.post('/app-api/promotion/coupon/take', { templateId: e.id }).then((res) => {
        this.initCouponList()
      })
    },
    routeTo(e) {
      uni.navigateTo({
        url: '/other/supply-apply/supply-apply?goodsId=' + this.goodsId
      })
    },
    goShop() {
      uni.navigateTo({
        url: '/other/merchant-center/merchant-center?id=' + this.shop.id
      })
    },
    onPreview(e) {
      uni.previewImage({
        current: e,
        urls: this.goodsInfo.carousel_imgs
      })
    },
    crateMsg() {
      if (!this.msgContent) {
        this.$u.toast('咨询内容不能为空')
        return
      }
      this.showMsg = false

      uni.dialog.confirm('温馨提示', '创建咨询？', () => {
        this.$u
          .post('/app-api/trade/pre-sale-consultation/create', {
            message: this.msgContent,
            spuId: this.goodsId
          })
          .then((res) => {})
      })
    }
  }
}
</script>

<style lang="scss">
@import url('goods-details.css');

page {
  background: #eeeeef;
}
.couponListView {
  display: flex;
  flex-direction: column;
}

.couponView {
  display: flex;
  flex-direction: row;
  background: #fff;
  /* box-shadow: 0px -8rpx 21rpx 0px rgba(230, 225, 227, 0.5); */
  border-radius: 20rpx;
}

.couponView2 {
  display: flex;
  flex-direction: row;
  background: #f5f5f5;
  border-radius: 20rpx 20rpx 0px 0px;
}

.moneyView {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190rpx;
  height: 170rpx;
  background: #0f76bc;
  border-radius: 20rpx 0rpx 0px 20rpx;
  color: #fff;
}

.moneyView2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190rpx;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 20rpx 0rpx 0px 20rpx;
}

.couponMoney {
  font-size: 24rpx;
}

.couponMoney text {
  font-size: 50rpx;
  font-weight: bold;
}

.couponTips {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.couponMoney2 {
  font-size: 30rpx;
  color: #999;
}

.couponMoney2 text {
  font-size: 38rpx;
  font-weight: bold;
  color: #999;
}

.couponTips2 {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.lineView {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  margin-left: -15rpx;
  height: 170rpx;
}

.circle {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #fff;
  margin-top: -15rpx;
}

.circle2 {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #fff;
  margin-bottom: -15rpx;
}

.line {
  flex: 1;
  width: 1px;
  /* 设置元素的宽度 */
  border-left: 1px dashed #fe333340;
  /* 左边虚线 */
}

.line2 {
  flex: 1;
  width: 1px;
  /* 设置元素的宽度 */
  border-left: 1px dashed #fff;
  /* 左边虚线 */
}

.couponInfoView {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 0px;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0px 0px;
  position: relative;
}

.couponInfoView2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 0px;
  height: 170rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0px 0px;
  position: relative;
}

.InfoView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.couponTitle {
  font-size: 32rpx;
  color: #333333;
}

.couponTitle2 {
  font-size: 32rpx;
  color: #999;
}

.couponTime {
  flex: 1;
  font-size: 24rpx;
  color: #333;
}

.couponTime2 {
  flex: 1;
  font-size: 24rpx;
  color: #999;
}

.couponBtn {
  background-color: #0f76bc;
  font-size: 26rpx;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  color: #fff;
  border-radius: 35rpx;
  margin: -55rpx 20rpx 0 0;
}

.couponBtn2 {
  font-size: 26rpx;
  color: #fe3333;
  opacity: 0.5;
  margin-right: 20rpx;
}

.couponText {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  margin-right: 20rpx;
}

.submit-btnz {
  width: 300rpx;
  background-color: #0f76bc;
  border-radius: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  padding: 18rpx 0;
}
.popup-box2 {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
